<template>
	<view class="container">
		<Page :page-function="getMyChildrenPage" v-model:dataList="childrenList" v-model:page="page">
			<view class="child" v-for="item in childrenList" :key="item.id">
				<view class="left">
					<view class="avatar">
						<image :src="getImageUrlWithDomain(item.profileImg)" mode="aspectFill"></image>
					</view>
					<view class="status" :class="{ online: item.status !== 0 }"></view>
				</view>
				<view class="center">
					<view class="name">
						{{ item.auditStatus === auditStatusEnum.PASS.value ? `${item.surname}${item.name}` : `用户${substringSuffix(item.phone, 4)}` }}
					</view>
					<view class="id">
						ID:{{ item.id }}
					</view>
				</view>
				<view class="right">
					<view class="create-time">
						为我带来的收益
					</view>
					<view class="incomes">
						￥{{ formatAmount(item.commissionIncome) }}
					</view>
				</view>
			</view>
		</Page>
	</view>
</template>

<script setup>
import Page from '@/components/page.vue'
import { getMyChildrenPage } from '@/api/user.js'
import { ref, reactive } from 'vue'
import { auditStatusEnum } from '@/utils/enums.js'
import { substringSuffix } from '@/utils/stringUtil.js'
import { formatDatetime } from '@/utils/datetimeUtil.js'
import { formatAmount } from '@/utils/amountUtil.js'
import { getImageUrlWithDomain } from '@/utils/imageUtil.js'

const childrenList = ref([])

const page = reactive({
	pageNum: 1,
	pageSize: 10
})

</script>

<style scoped lang="scss">

* {
	box-sizing: border-box;
}

.container {
	min-height: 100vh;
	.child {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #ccc;
		.left {
			position: relative;
			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.status {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				z-index: 100;
				background-color: #d9001b;
				border: 5rpx solid #f8f8f8;
			}
			.online {
				background-color: #45d66a;
			}
		}
		.center {
			flex: 1;
			padding: 0 30rpx;
			.name {
				color: #000;
				font-size: 30rpx;
			}
			.id {
				color: #333;
				font-size: 24rpx;
				margin-top: 12rpx;
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.create-time {
				color: #333;
				font-size: 24rpx;
			}
			.incomes {
				margin-top: 15rpx;
				color: $uni-color-primary;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}
}

</style>